<!-- 数据展示图 -->
<template>
  <div class="content">
    <div class="total">
      数据总量：
      <span ref="totalCountTarget" class="total-num text-gradient">679,473,929</span>
      条记录
    </div>
    <div class="regions">
      <div class="region">
        华北：
        <span ref="city1" class="region-num">8,778,988</span>
      </div>
      <div class="region">
        东北：
        <span ref="city2" class="region-num">8,778,988</span>
      </div>
      <div class="region">
        华东：
        <span ref="city3" class="region-num">8,778,988</span>
      </div>
      <div class="region">
        中南：
        <span ref="city4" class="region-num">8,778,988</span>
      </div>
      <div class="region">
        西南：
        <span ref="city5" class="region-num">8,778,988</span>
      </div>
      <div class="region">
        西北：
        <span ref="city6" class="region-num">8,778,988</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { CountUp } from 'countup.js'
import { defineProps, onMounted, ref } from 'vue'

const props = defineProps({
  data: {
    typeof: Object,
    required: true,
  }
})

const totalCountTarget = ref(null)
const city1 = ref(null)
const city2 = ref(null)
const city3 = ref(null)
const city4 = ref(null)
const city5 = ref(null)
const city6 = ref(null)

onMounted(() => {
  new CountUp(totalCountTarget.value, props.data.total).start()
  new CountUp(city1.value, props.data.hb).start()
  new CountUp(city2.value, props.data.db).start()
  new CountUp(city3.value, props.data.hd).start()
  new CountUp(city4.value, props.data.zn).start()
  new CountUp(city5.value, props.data.xn).start()
  new CountUp(city6.value, props.data.xb).start()
})

</script>
<style lang="less" scoped>
@font-face {
  font-family: 'Electronic';
  src: url('@/assets/fonts/FX-LED.TTF');
}

/*  背景渐变+ 字体镂空 */
.text-gradient {
  background-image: linear-gradient(to bottom, #e5e4ea, #5ea8f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content {
  // padding: .125rem;
  // padding-top: 0;
  // height: 3.25rem;

  .total {
    color: rgb(203 213 225);
    text-align: center;
    font-size: .375rem;

    .total-num {
      font-size: 1.25rem;
      margin: .075rem;
      font-weight: bold;
      font-family: 'Electronic';
    }
  }

  .regions {
    // margin-top: .125rem;
    margin-bottom: .125rem;
    display: flex;
    flex-wrap: wrap;

    .region {
      width: 33%;
      color: rgb(148 163 184);
      text-align: center;
      font-size: .3375rem;

      .region-num {
        font-family: 'Electronic';
        color: #5dc5ef;
        font-size: .525rem;
      }
    }

  }

}
</style>